<template>
  <view v-if="renderList && renderList.length" class="tags">
    <view v-for="(item, index) in renderList" :key="index" class="tag-item" :style="[liStyle]">
      <view class="tag">
        <view>#{{ item.label }}</view>
        <view class="flex">
          <text>{{ item.userCount }}人提到</text>
          <x-icon name="icon-022" size="34" color="#FE6B2C" class="icon" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PAppriseRollingTags',
  components: {
    XIcon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      renderList: null,
      transition: null,
      currentIndex: 0,
      timeout: null
    };
  },
  computed: {
    liStyle() {
      return {
        transition: this.transition,
        transform: `translateY(-${this.currentIndex * 100}%)`
      };
    }
  },
  mounted() {
    if (this.list?.length <= 4) {
      this.renderList = this.list;
      return;
    }
    this.renderList = [...this.list, ...this.list.slice(0, 4)];
    this.start();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    start() {
      this.timeout = setTimeout(() => {
        if (this.currentIndex === this.list.length) {
          this.transition = '';
          this.currentIndex = 0;
        } else {
          this.transition = 'all 1s linear';
          this.currentIndex++;
        }
        this.start();
      }, this.currentIndex === 0 ? 0 : 1000);
    }
  }
};
</script>

<style lang="scss">
.tags{
  max-height: 320px;
  overflow: hidden;
  .tag-item{
    padding-bottom: 20px;
  }
  .tag{
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    background: #FFECDA;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #000;
    font-size: 26px;
    font-weight: 500;
  }
}
</style>
